<template>
  <div class="web-login">
    <img src="@/assets/goBack.png" alt="" class="goBack" @click="Back">
    <div class="logo">
      <img src="@/assets/logo.png" alt="" />
    </div>

    <!--  -->
    <van-form @submit="handleClick">
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="userpassword" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup>
import { userStore } from '@/stores/user'
import { useRouter } from "vue-router"
import { login } from "@/api/mm";
import { ref } from "vue"

const router = useRouter()
const store = userStore()
const username = ref("admin")
const userpassword = ref(123456)

const Back = () => {
  history.back()
}

const handleClick = async () => {
  const data = (await login({
    adminname: username.value,
    password: userpassword.value
  })).data;
  store.uesrdata = data
  router.replace("/center");
}

</script>

<style scoped>
.logo {
  height: 202px;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 60px;
  height: 60px;
}

.goBack {
  width: 26px !important;
  height: 26px !important;
  position: absolute;
  padding: 10px;
}

.login {
  padding: 0px 10px;
}
</style>
